<template>
    <!--总体-->
    <div >
        <!--背景图-->

        <div>
            <img src="../../assets/zhbx/zhbk1.jpg" width="100%">
        </div>
        <!--对比-->
        <div style="">
            <!--综合布线为什么选择-->
            <div style="width: 70%;margin-left: 15%; margin-top: 2%;">
                <h2 style="color: #000000; font-size: 36px;">综合布线<span style="color: red;">为什么选择坤鸿</span></h2>
                <p style="font-size:18px; color: blue;">专业设计-专业施工-权威品牌</p>
            </div>
            <div style="display: flex;">
                <!--左边-->
                <div style="height: 600px; width:50%; background-color: #dcdcdc;">
                    <div style="width: 45%; height: 70%; font-size: 20px; float: right; margin-top: 7%;padding-right: 10px">
                        <p></p>
                        <h2 class="h2top1">其他综合布线</h2><br/>
                        <p class="plef">不能提供整套解决方案</p>
<!--                        左边叉叉-->
<!--                        <div style="width: 10%; height: 8%; display: flex; float: right;-->
<!--                        background-color: #1f48ae; border-radius: 100%; align-items: center;justify-content: center;" >-->
<!--                            <Icon type="md-close" />-->
<!--                        </div>-->
<!--                        <Icon type="ios-close-circle" size="8%"/>-->
                        <br/>
                        <p class="plef">没有行业权威认证资质</p><br/>
                        <p class="plef">没有稳定的产品供应链</p><br/>
                        <p class="plef">综合布线不够专业</p><br/>
                        <p class="plef">运作团队经验不足</p><br/>
                        <p class="plef">售前售后服务没有完善</p>
                    </div>
                </div>
                <!--右边-->
                <div style="height: 600px; width: 50%;  background-color: #f7f7f7; float: right;padding-left: 10px">
                    <div style="width: 45%; height: 70%; font-size: 20px; float:left; margin-top: 7%;">
                        <h2 class="h2top2">坤鸿综合布线</h2><br/>
                        <p class="prig">提供整套解决方案</p><br/>
                        <p class="prig">行业权威认证资质</p><br/>
                        <p class="prig">众多品牌供应链商</p><br/>
                        <p class="prig">专业综合布线设计施工</p><br/>
                        <p class="prig">经验丰富的运作团队</p><br/>
                        <p class="prig">最及时的售前售后服务</p>
                        <br>
                    </div>
                </div>
            </div>
        </div>
        <!--广告-->
        <div class="bjt3"></div>

        <!--综合布线首选品牌-->
        <div style="width: 70%; margin-left: 15%; margin-top: 2%; border-bottom:1px dashed #000">
            <h2 style="color: #000000; font-size: 36px;">综合布线<span style="color: red;">首选品牌</span></h2>
            <p style="font-size:18px; color: blue;">无线覆盖、弱电工程行业领先的设计施工专家</p>
        </div>

        <div style="display: flex;">
            <!--let-->
            <div style="width: 25%; margin-left: 25%;">
                <div style="height:250px; margin-top: 8%;">
                    <div style="display: flex;">
                        <div>
                            <img src="../../assets/zhbx/01.png"/>
                        </div>
                        <div style="margin-top: 8%; ">
                            <h2 style="color:blue; font-size: 25px;">10年专注于综合布线技术</h2>
                            <p style="font-size: 14px;">FOCUS ON INTEGRATED WIRING TECHNOLOGY</p>
                        </div>
                    </div>
                    <div style="font-size: 16px; color: #000000; line-height: 30px; margin-top: 5%  ;">
                        <p>专业的设计团队为您提供一流的综合布线设计方案；</p>
                        <p>专业的施工团队为您提供精湛的综合布线施工技术；</p>
                        <p>专业的售后团队为您提供最及时的售后问题解决方案；</p>
                    </div>
                </div>
                <div style="margin-top: 8%;">
                    <div>
                        <img src="../../assets/zhbx/02p.jpg"/>
                    </div>
                </div>
                <div style="height: 250px; margin-top: 8%;">
                    <div style="display: flex;">
                        <div>
                            <img src="../../assets/zhbx/03.png"/>
                        </div>
                        <div style="margin-top: 8%; ">
                            <h2 style="color:blue; font-size: 25px;">不放过每个细节 工程质量有保证</h2>
                            <p style="font-size: 14px;">THE PROJECT QUALITY IS GUARANTEED</p>
                        </div>
                    </div>
                    <div style="font-size: 16px; color: #000000; line-height: 30px; margin-top: 5%  ;">
                        <p>集结100余家国内外品牌供应商，产品质量有保证，价格放心；</p>
                        <p>施工全程均有10年以上从业经验经理细节把关，施工质量更放心；</p>
                        <p>力求将综合布线中的每一个施工细节做到极致，让您更放心；</p>
                    </div>
                </div>
                <div style="margin-top: 8%;">
                    <div>
                        <img src="../../assets/zhbx/04p.jpg"/>
                    </div>
                </div>
            </div>

            <!--re-->
            <div style="margin-left: 3%;">
                    <div style="margin-top: 8%;">
                        <div>
                            <img src="../../assets/zhbx/01p.jpg"/>
                        </div>
                    </div>
                    <div style="height: 250px; margin-top: 8%;">
                        <div style="display: flex; ">
                            <div>
                                <img src="../../assets/zhbx/02.png"/>
                            </div>
                            <div style="margin-top: 8%; ">
                                <h2 style="color:blue; font-size: 25px;">量身定制 提供最佳方案</h2>
                                <p style="font-size: 14px;">PROVIDE THE BEST SOLUTION</p>
                            </div>
                        </div>
                        <div style="font-size: 16px; color: #000000; line-height: 30px; margin-top: 5%  ;">
                            <p>ISO9001质量体系认证；</p>
                            <p>专业设计施工团队；</p>
                            <p>根据您的个性化需求，量身定制最佳解决方案；</p>
                        </div>
                    </div>
                    <div style="margin-top: 8%;">
                        <div>
                            <img src="../../assets/zhbx/03p.jpg"/>
                        </div>
                    </div>
                    <div style="height: 250px; margin-top: 8%;">
                        <div style="display: flex;">
                            <div>
                                <img src="../../assets/zhbx/04.png"/>
                            </div>
                            <div style="margin-top: 8%; ">
                                <h2 style="color:blue; font-size: 25px;">终身售后服务 一次施工终身无忧</h2>
                                <p style="font-size: 14px;">LIFETIME AFTER-SALES SERVICE</p>
                            </div>
                        </div>
                        <div style="font-size: 16px; color: #000000; line-height: 30px; margin-top: 5%  ;">
                            <p>按月回访，认证听取您的每一个建议；</p>
                            <p>技术响应，快速解决您的每一个问题；</p>
                            <p>业内率先推出免费二次搬家“技术”服务；</p>
                        </div>
                    </div>
            </div>
        </div>

        <div class="bjt2"></div>
    </div>
</template>

<script>
    export default {
        name: "zhbx"
    }
</script>

<style scoped>
    .bjt {
        height: 595px;
        background: url("../../assets/zhbx/zhbk1.jpg") 100%;
    }

    .div1 {
        background-color: #21af3e;
        width: 100%;
        border: 1px solid #cacece;
        height: 10%;
    }

    .div2 {
        background-color: #FFF;
        width: 100%;
        border: 1px solid #cacece;
        height: 8%;
    }


    .h2top1 {
        color: #FFFFFF;
        text-align: right;
    }

    .h2top2 {
        color: blue;
    }

    .plef {
        color: #FFFFFF;
        width: 80%;
        background-color: #808080;
        border-radius: 10px;
        margin-left: 10%;
        padding-left: 15px;
    }

    .prig {
        color: #FFF;
        width: 80%;
        background-color: blue;
        border-radius: 10px;
        margin-left: 10%;
        padding-left: 15px;
    }

    .bjt2 {
        height: 182px;
        background: url("../../assets/zhbx/zhbx2.png") no-repeat ;
        background-size: 100%;
    }

    .bjt3 {
        height: 182px;
        background: url("../../assets/zhbx/zhbx3.png") no-repeat ;
        background-size: 100%;
    }
</style>